<template>
  <div id="app">
    <!-- 使用vant组件 van- 开头 -->
    <!-- v-if="!$route.meta.hideNav" 路由跳转时,底部隐藏导航条-->
    
    <van-tabbar 
      route
      v-model="active"
      active-color="#ee0a24"
      inactive-color="#000"
      z-index="990"
      v-if="!$route.meta.hideNav"
    >
      <van-tabbar-item to="/" icon="wap-home-o" >首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="apps-o" >分类</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="cart-o">购物车</van-tabbar-item>
      <!-- <van-tabbar-item icon="contact">个人中心</van-tabbar-item> -->
      <van-tabbar-item to="/user">
        <span>个人中心</span>
        <!-- 自定义插槽 v-slot: 简写成 # -->
        <template #icon>
          <i class="fa fa-user-circle-o" aria-hidden="true"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <!-- 路由出口 -->
    <!-- 动画过渡(注释可用) -->
    <!-- <transition-group 
      enter-active-class="animate__animated animate__fadeInRight"
    > -->
<<<<<<< HEAD
        <router-view/>
=======
        <router-view key="0"/>
>>>>>>> db4a5f094eee38ffd715af53d411876e5007d1b9
    <!-- </transition-group> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      
    };
  },
};
</script>
<style lang="less" >
#app {
  padding-bottom: 50px;
}
</style>
